<!DOCTYPE html> 
<html> 
	<head>
		<!-- required -->
		<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1">

		<!-- for DEMO UI use only -->
		<link href="../../res/bootstrap.min.css" rel="stylesheet">
		<link href="../../res/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="../../res/styles.css" rel="stylesheet">
		<!-- -->
		
	</head>
	<body> 
		<!-- required -->
		<applet name="fsa" code="fsa.class" archive="../../fsa.jar" style="position:absolute; left:-1px;" height="1" width="1"></applet> 

		<!-- ideally no user interface will be written in startup html directly
		however, just in case you want to write, put it in a div named "body", this will
		ensure that this UI is moved to a logical place in overall page structure so UI is 
		not distorted drastically -->
		<div id="body">
		
			<!-- top bar -->
			<div class="navbar">
			  <div class="navbar-inner">
				<div class="container-fluid">
				  <a class="brand">Plugins - Basic building blocks.</a>
				  <div class="pull-right">
					<a class="navbar-text noline" href="..\..\basic\plugins" fluid-noIntercept target="_blank" title="Open source folder"><i class="icon-folder-open"></i> Source</a>
					<a class="navbar-text noline" href="http://docs.fluidjs.vikasburman.com/2013/01/plugins.html" fluid-noIntercept target="_blank" title="Open example page"><i class="icon-file"></i> Docs</a>
				  </div>
				</div>
			  </div>
			</div>
			<!-- -->

			<div class="container-fluid">
				<div class="row-fluid">

					<!-- side bar -->
					<div class="span3"><div class="well sidebar-nav">
						<!-- sections -->
						<div class="accordion" id="accordion">
						  <!-- showcase -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec1" fluid-noIntercept>
							<i class="icon-comment"></i> Showcase
						  </a></div><div id="sec1" class="accordion-body collapse in"><div class="accordion-inner">
							<p><i class="icon-cog"></i> This shows how plugins, which are the basic building blocks of fluid, can be defined and used. You will also
							see how plugins can be loaded dynamically on-demand (without defining in startup html).</p>
							<p><i class="icon-cog"></i> It also shows how plugins can be loaded dynamically on-demand (without defining in startup html).</p>
						  </div></div></div>
						  <!-- -->
						  <!-- observations -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec2" fluid-noIntercept>
							<i class="icon-eye-open"></i> Observations
						  </a></div><div id="sec2" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> See the plugin lifecycle events log.</p>
							<p><i class="icon-cog"></i> See the loaded plugins list that shows that entire framework is built using a set of core plugins.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Activities -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec3" fluid-noIntercept>
							<i class="icon-hand-right"></i> Activities
						  </a></div><div id="sec3" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Have a look at <span class="file">app-plugins.html</span> and <span class="file">*.js</span> files.</p>
							<p><i class="icon-cog"></i> Open developer tools for your browser and explore the object 
							structure of <span class="object">$f.myPlugin1</span>, that represents a simple plugin.</p>
							<p><i class="icon-cog"></i> Load plugins dynamically by a simple call; have a look at <span class="object">$f.myPlugin2.loadPlugin</span> method.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Takeaways -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec4" fluid-noIntercept>
							<i class="icon-shopping-cart"></i> Takeaways
						  </a></div><div id="sec4" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> <span class="file">{plugin}.debug.js</span> files are standard JavaScript file that needs to be added in html page after framework JS.</p>
							<p><i class="icon-cog"></i> A plugin has a lifecycle.</p>
							<p><i class="icon-cog"></i> Each plugin has a unique id.</p>
							<p><i class="icon-cog"></i> All plugins are added to <span class="object">$f</span> object.</p>
							<p><i class="icon-cog"></i> Plugins can interact with each other.</p>
							<p><i class="icon-cog"></i> Plugins can be loaded dynamically on-demand.</p>
						  </div></div></div>
						  <!-- -->
						  <!-- Notes -->
						  <div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle nav-header noline" data-toggle="collapse" data-parent="#accordion" href="#sec5" fluid-noIntercept>
							<i class="icon-ok"></i> Notes
						  </a></div><div id="sec5" class="accordion-body collapse"><div class="accordion-inner">
							<p><i class="icon-cog"></i> Dynalically loading of plugins is not available in 'kernel' package of framework.</p>
						  </div></div></div>
						  <!-- -->
						</div>
						<!-- -->
					</div></div>
					<!-- -->
				
					<!-- right half where the action is -->
					<div class="span9"><div class="row-fluid">
							
						<!-- tabs -->
						<ul class="nav nav-tabs">
							<li id="t1" class="active"><a href="#" onclick="javascript: return showTab('t1', 'lifecycle');">Lifecycle</a></li>
							<li id="t2"><a href="#" onclick="javascript: return showTab('t2', 'list');">List</a></li>
							<li id="t3"><a href="#" onclick="javascript: return showTab('t3', 'dynamic');">Dynamic Extend</a></li>
						</ul>
						<!-- -->
						
						<!-- lifecycle events log -->
						<div id="lifecycle">
						</div>
						<!-- -->
						
						<!-- plugins list -->
						<div id="list" style="display: none;">
						</div>						
						<!-- -->
						
						<!-- dynamic extend -->
						<div id="dynamic" style="display: none;">
							<h4>Load a plugin programatically</h4>
							<span class="label label-important">Before</span><br />
							<i class="icon-info-sign"></i> Check out the list, myPlugin3 is not there. <br /><br />
							
							<a href="#" class="btn" onclick="javascript: $f.myPlugin2.loadPlugin(); return false;">$f.myPlugin2.loadPlugin();</a> <br /><br />
							
							<span class="label label-important">After</span><br />
							<i class="icon-info-sign"></i> Check the list again, myPlugin3 is loaded now. <br />
							<i class="icon-info-sign"></i> Also have a look at the lifecycle events of this newly loaded plugin.<br />
							<i class="icon-info-sign"></i> Press <span class="object">F5</span> to refresh browser page. <br />
							<i class="icon-info-sign"></i> Explore again and you will see that myPlugin3 is gone.<br /><br />
						</div>						
						<!-- -->
						
					</div></div>
					<!-- -->
					
				</div>	
			</div>
			
		</div>
		
		<!-- refer framework JS (as last item in body) -->
		<script type="text/javascript" src="../../fluid.debug.js"></script> 	
		
		<!-- for DEMO UI use only (defined after framework, because this needs jQuery,
		     which is bundled into framework) -->
		<script src="../../res/bootstrap.min.js"></script>
		<script src="../../res/general.js"></script>
		<!-- -->
		
		<!-- statically loaded plugins (NOTE: this is defined after the framework definition) -->
		<script type="text/javascript" src="myPlugin1.debug.js"></script> 
		<script type="text/javascript" src="myPlugin2.debug.js"></script> 
		<!-- -->
	</body> 
</html> 
